<template>
  <div class="about">
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark">
	<p class="tu"><img src="../assets/tobu.png"></p>
	<div class="zi"><p>登录</p><p>|</p><p>注册</p></div>
	</div></el-col>
  </el-row>
  <div class="biaoqian">
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="首页" name="first"><img class="xiala" src="../assets/xiala.png"></el-tab-pane>
    <el-tab-pane label="追玩云游戏" name="second"><img class="xiala" src="../assets/xiala.png"></el-tab-pane>
    <el-tab-pane label="游戏直播" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="游戏公会" name="fourth">定时任务补偿</el-tab-pane>
	<el-tab-pane label="游戏视频" name="shipin">定时任务补偿</el-tab-pane>
	<el-tab-pane label="游戏论坛" name="luntan">定时任务补偿</el-tab-pane>
	<el-tab-pane label="商务合作" name="hezuo">定时任务补偿</el-tab-pane>
  </el-tabs>
  </div>
  <div>
   <el-row :gutter="20">
     <el-col :span="16"><div class="grid-content bg-purple zouxia"><h2 class="zou"><img src="../assets/zuotu.png">游戏直播</h2><el-row>
  <el-col :span="6"><div class="shang"><img class="shangtu" src="../assets/zuo1.png"><p>王者荣耀24小时大神直播</p></div></el-col>
  <el-col :span="6"><div class="shang"><img class="shangtu" src="../assets/zuo2.png"><p>重庆声优新主播，求罩</p></div></el-col>
  <el-col :span="6"><div class="shang"><img class="shangtu" src="../assets/zuo3.png"><p>新主播，求照顾</p></div></el-col>
  <el-col :span="6"><div class="shang"><img class="shangtu" src="../assets/zuo4.png"><p>我很肥走得慢别打我</p></div></el-col>
</el-row><el-row>
  <el-col :span="6"><div class="xia"><img class="shangtu" src="../assets/zuo5.png"><p>【禾瑞】小江</p></div></el-col>
  <el-col :span="6"><div class="xia"><img class="shangtu" src="../assets/zuo6.png"><p>YG辅王在线蹲野王</p></div></el-col>
  <el-col :span="6"><div class="xia"><img class="shangtu" src="../assets/zuo7.png"><p>新主播，求照顾</p></div></el-col>
  <el-col :span="6"><div class="xia"><img class="shangtu" src="../assets/zuo8.png"><p>新主播，求照顾</p></div></el-col>
</el-row></div></el-col>
     <el-col :span="8"><div class="grid-content bg-purple youxia"><h2 class="you">排行榜</h2><div class="youzi"><p><img src="../assets/you1.png" /> 逗B苍冲冲冲</p><p><img src="../assets/you2.png"> 猪八戒亚瑟泉水洗澡</p><p><img src="../assets/you3.png" /> 欢乐路人局</p><p>4 7038瞳瞳：网瘾少女</p><p>5 国服关羽冲击国1白起</p><p>6 野王大厅撩小姐姐！哦哦哦</p><p>7 
CF枪王排位全服第一</p><p>8 新主播，求照顾</p></div></div></el-col>
   </el-row>
  </div>
  <hr />
   <div>
      <el-row :gutter="20">
        <el-col :span="16"><div class="grid-content bg-purple zouxia"><h2 class="zou"><img src="../assets/zuotu.png">游戏视频</h2><el-row>
     <el-col :span="6"><div class="shang"><img class="shangtu" src="../assets/zuo9.png"><p>王者荣耀24小时大神直播</p></div></el-col>
     <el-col :span="6"><div class="shang"><img class="shangtu" src="../assets/zuo10.png"><p>重庆声优新主播，求罩</p></div></el-col>
     <el-col :span="6"><div class="shang"><img class="shangtu" src="../assets/zuo11.png"><p>新主播，求照顾</p></div></el-col>
     <el-col :span="6"><div class="shang"><img class="shangtu" src="../assets/zuo12.png"><p>我很肥走得慢别打我</p></div></el-col>
   </el-row><el-row>
     <el-col :span="6"><div class="xia"><img class="shangtu" src="../assets/zuo13.png"><p>【禾瑞】小江</p></div></el-col>
     <el-col :span="6"><div class="xia"><img class="shangtu" src="../assets/zuo14.png"><p>YG辅王在线蹲野王</p></div></el-col>
     <el-col :span="6"><div class="xia"><img class="shangtu" src="../assets/zuo15.png"><p>新主播，求照顾</p></div></el-col>
     <el-col :span="6"><div class="xia"><img class="shangtu" src="../assets/zuo16.png"><p>新主播，求照顾</p></div></el-col>
   </el-row></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple youxia"><h2 class="you">排行榜</h2><div class="youzi"><p><img src="../assets/you4.png" /> 逗B苍冲冲冲</p><p><img src="../assets/you5.png"> 猪八戒亚瑟泉水洗澡</p><p><img src="../assets/you6.png" /> 欢乐路人局</p><p>4 7038瞳瞳：网瘾少女</p><p>5 国服关羽冲击国1白起</p><p>6 野王大厅撩小姐姐！哦哦哦</p><p>7 
   CF枪王排位全服第一</p><p>8 新主播，求照顾</p></div></div></el-col>
      </el-row>
     </div>
     
  
  </div>
  
</template>

<style>

	.about{
		position: relative;
		width: 1501px;
	}
	.tu{
		position: absolute;
		left: 130px;
	}
	.zi{
		position: absolute;
		right: 165px;
		top:25px;
		
	}
	.zi p{
		display: inline-block;
		color: white;
		
	}
	.biaoqian{
		width: 1282px;
		height: 400px;
		margin: auto;
	}
	.xiala{
		width: 1282px;
		height: 346px;
	}
	.you{
		text-align: left;
	}
	.youzi{
		font-size: 20px;
		text-align: left;
		height: 400px;
		margin-top: 50px;
	}
	.youzi p{
		font-size: 15px;
		color: black;
		
	}
	.zou{
	text-align: left;
	}
    .shangtu{
		width: 228px;
		height: 154px;
		margin-top: 20px;
	}
	.zouxia{
		margin-left: 105px;
		width: 922px;
	}
    .youxia{
		margin-left: 60px;
	}

   .el-row {
     margin-bottom: 20px;
     &:last-child {
       margin-bottom: 0;
     }
   }
   .el-col {
     border-radius: 4px;
   }
 .bg-purple-dark {
     background: #1e2023;
     width: 100%;
     height: 102px;
 }
 
   .grid-content {
     border-radius: 4px;
     min-height: 36px;
   }
   .row-bg {
     padding: 10px 0;
     background-color: #1e2023;
   }
 .el-tabs__item.is-active {
     color: red;
 }
 .el-tabs__item:hover {
     color: red;
     cursor: pointer;
 }
 .el-tabs__active-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 2px;
     background-color: red;
     z-index: 1;
     transition: transform .3s cubic-bezier(.645,.045,.355,1);
     list-style: none;
 }
   .bg-purple {
     background: white; 
   }
   .bg-purple-light {
     background: #e5e9f2;
   }
   .grid-content {
     border-radius: 4px;
     min-height: 36px;
   }
</style>

<script>
  export default {
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>